<template>
  <div class="doctor-profile">
    <div class="profile-header">
      <img :src="getAvatarUrl(doctor.avatar)" :alt="doctor.name" v-if="doctor.avatar">
      <div class="name-title">
        <div class="name">医生: {{ doctor.name }}</div>
        <div class="title">职称: {{ doctor.title }}</div>
      </div>
    </div>
    <div class="profile-details">
      <div class="left-details">
        <div>简介: {{ doctor.description }}</div>
        <div>医院: {{ doctor.hospital }}</div>
        <div>科室: {{ doctor.department }}</div>
      </div>
      <div class="right-details">
        <div>评分: {{ doctor.score }}</div>
        <div>价格: {{ doctor.price }}</div>
        <div>回复: {{ doctor.response_count }}</div>
      </div>
    </div>
  </div>
  <div>
    <h2>擅长方向</h2>
    <img :src="'http://localhost:8000/'+user.avatar" alt="17" style="width: 80px">
    <div v-for="(item, index) in user_question" :key="index">

       <h3><strong>标题：</strong> {{ item.title }}<br></h3><h5>用户-<<{{user.nickname}}>>: {{ item.content }}</h5>
    </div>
    <div v-for="(item, index) in doctor_response" :key="index">
      <p>医生回复：{{ item.content }}</p>
    </div>

  </div>
<el-button type="danger" style="width: 100%" @click="ask_question">向医生提问-----<strong>{{doctor.price}}</strong></el-button>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue';
import {useRoute} from 'vue-router';
import axios from "axios";
import router from "../router/index.js";
const route = useRoute();

const doctor = computed(() => {
  try {
    return JSON.parse(route.query.doctor);
  } catch (error) {
    console.error('解析医生信息失败:', error);
    return {};
  }
});

const getAvatarUrl = (avatar) => {
  return avatar ? `http://localhost:8000/${avatar}` : '';
};
const user = ref('')
const user_question = ref('')
const doctor_response = ref('')

onMounted(() => {
  axios.post('http://localhost:8000/app/user_question/',{id:doctor.value.id})
      .then(res=>{
        // console.log(res.data)
        user_question.value = res.data.user_question
        doctor_response.value = res.data.doctor_response
        user.value = res.data.user
        // console.log(user.value)

      })
})

const ask_question = () => {
  // 跳转界面，医生咨询---，判断是否已登录
  if(localStorage.getItem('token')){
    // router.push({path:'/pay-ask-doctor',query:{id:doctor.value.id}})
    router.push({path:'/select-user-input',query:{id:doctor.value.id}})
  }else{
    alert('请先登录')
    router.push('/login')
  }
}

</script>

<style scoped>
.doctor-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

.profile-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.profile-header img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

.name-title {
  text-align: left;
}

.name {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 5px;
}

.title {
  color: #777;
  font-size: 0.9em;
}

.profile-details {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  line-height: 1.5;
  font-size: 0.9em;
}

.left-details, .right-details {
  flex: 1;
  padding: 10px;
}

.left-details {
  border-right: 1px solid #ccc;
}

.left-details div, .right-details div {
  margin-bottom: 10px;
}
</style>
